<template>
  <div id="orderSearchDiv">
    <div id="dataViewDiv">
      <div style="margin:0;overflow:hidden">
        <div style="color:#2B7DBC;font-size:16px;float:left;">整体会员概况</div>
      </div>
      <div style="margin-top:20px;border-top:1px solid #DCDFE6;overflow:hidden">
        <div style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;">
          会员概况
        </div>
        <el-form>
          <el-form-item style="margin:0;">
            <router-link
              to="memberInfo"
              style="float:right;margin-bottom:5px;padding-top: 10px;"
              >会员档案<i class="el-icon-d-arrow-right"></i
            ></router-link>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-radio-group v-model="dataViewDate" @change="getMemberCount()">
          <el-radio-button label="1">今天</el-radio-button>
          <el-radio-button label="2">最近三天</el-radio-button>
          <el-radio-button label="3">最近七天</el-radio-button>
          <el-radio-button label="4" class="el-radio-button-inner-datepicker">
            <el-date-picker
              v-model="dataViewRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickerDate"
              @blur="changeDataViewDate"
              @change="changeDataViewDate"
            ></el-date-picker>
          </el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top:20px;">
        <div id="order_total_flex">
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">新增会员人数（人）</div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.newNum }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">会员累计人数（人）</div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.total }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">强绑定会员数（人）</div>
              <div class="order_total_info">
                <span class="order_data">{{
                  totalData.strongBindMemberSum
                }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">弱绑定会员数（人）</div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.weakMemberSum }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">已流失会员数（人）</div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.lostMemberSum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />

    <el-divider></el-divider>

    <div class="index-container">
      <div class="header">
        <div class="header-left">
          <!-- <div style="margin:0;border-top:1px solid #DCDFE6;overflow:hidden"> -->
          <div
            style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;"
          >
            会员等级人数占比
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="不同会员等级的会员人数占比"
            >
              <el-button slot="reference" style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </div>

          <div class="all" style="display:flex;align-items:center;">
            <div style="width:500px;height:500px" ref="grade"></div>
            <div>
              <el-table
                :data="tableGradeData"
                border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                style="width:480px"
              >
                <el-table-column
                  prop="name"
                  label="会员等级"
                  width="160"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="value"
                  label="会员人数（人）"
                  width="160"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rate"
                  label="占比（%）"
                  width="160"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- </el-col>
        <el-col :span="6"> -->
        <el-divider></el-divider>
        <div style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;">
          会员下单数量占比
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="不同会员等级的已支付订单数量占比"
          >
            <el-button slot="reference" style="padding:0;border:0"
              ><i class="el-icon-question"></i
            ></el-button>
          </el-popover>
        </div>
        <div class="all" style="display:flex;align-items:center;">
          <div
            style="color:#2B7DBC;width:500px;height:500px"
            ref="shopping"
          ></div>
          <div>
            <el-table
              :data="tableShopData"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              style="width:480px"
            >
              <el-table-column
                prop="name"
                label="会员等级"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="value"
                label="订单数量（笔）"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="rate"
                label="占比（%）"
                width="160"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <!-- </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        </el-row> -->

        <el-divider></el-divider>
        <div style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;">
          会员注册渠道占比
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="不同会员注册渠道的注册人数占比"
          >
            <el-button slot="reference" style="padding:0;border:0"
              ><i class="el-icon-question"></i
            ></el-button>
          </el-popover>
        </div>
        <div class="all" style="display:flex;align-items:center;">
          <div style="width:500px;height:500px" ref="typeChart"></div>
          <div>
            <el-table
              :data="tableTypeData"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              style="width:480px"
            >
              <el-table-column
                prop="name"
                label="注册渠道"
                width="160"
                align="center"
              >
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.memberType === 1">自主注册</span>
                    <span v-if="scope.row.memberType == 2">产品分享注册</span>
                    <span v-if="scope.row.memberType === 3">活动分享注册</span>
                    <span v-if="scope.row.memberType == 4">店铺分享注册</span>
                    <span v-if="scope.row.memberType === 5">分享有礼注册</span>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="value"
                label="注册人数（人）"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="rate"
                label="占比（%）"
                width="160"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="header-center">
        <div style="margin:0;border-top:1px solid #DCDFE6;overflow:hidden">
          <div
            style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;"
          >
            会员收货地址分布图
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="数据来源：已支付订单数量"
            >
              <el-button slot="reference" style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </div>
        </div>
        <div>
          <div
            ref="myChartChina"
            :style="{ width: '500px', height: '500px' }"
          ></div>
        </div>
      </div>

      <div class="header-right">
        <el-divider></el-divider>
        <div style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;">
          会员成交金额占比
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="不同会员等级的已完成订单累计金额占比"
          >
            <el-button slot="reference" style="padding:0;border:0"
              ><i class="el-icon-question"></i
            ></el-button>
          </el-popover>
        </div>
        <div class="all" style="display:flex;align-items:center;">
          <div style="width:500px;height:500px" ref="memberPay"></div>
          <div>
            <el-table
              :data="tableMemberPayData"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              style="width:480px"
            >
              <el-table-column
                prop="name"
                label="会员等级"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="value"
                label="累计成交金额（元）"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="rate"
                label="占比（%）"
                width="160"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>

        <el-divider></el-divider>
        <div style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;">
          订单配送方式占比
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="不同配送方式的订单数量占比"
          >
            <el-button slot="reference" style="padding:0;border:0"
              ><i class="el-icon-question"></i
            ></el-button>
          </el-popover>
        </div>
        <div class="all" style="display:flex;align-items:center;">
          <div style="width:500px;height:500px" ref="deliveryType"></div>
          <div>
            <el-table
              :data="tableDeliveryTypeData"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              style="width:480px"
            >
              <el-table-column
                prop="name"
                label="会员等级"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="value"
                label="累计成交金额（元）"
                width="160"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="rate"
                label="占比（%）"
                width="160"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <div class="footer">
        <el-divider></el-divider>
        <div style="margin:0;overflow:hidden">
          <div
            style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;"
          >
            会员新增趋势
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="数据来源：注册会员人数"
            >
              <el-button slot="reference" style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
            <el-date-picker
              v-model="value2"
              size="small"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
              :default-value="new Date()"
              @change="getEcharts"
            ></el-date-picker>
          </div>
        </div>

        <div id="memberTrend" style="width:800px;height:400px;"></div>

        <el-divider></el-divider>
        <div style="margin:0;overflow:hidden">
          <div
            style="color:#2B7DBC;font-size:16px;float:left;padding-top: 10px;"
          >
            消费人数趋势
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="数据来源：付款会员人数"
            >
              <el-button slot="reference" style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
            <el-date-picker
              v-model="value3"
              size="small"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
              :default-value="new Date()"
              @change="showEcharts"
            ></el-date-picker>
          </div>
        </div>

        <div
          ref="consumptionTrend"
          :style="{ width: '800px', height: '500px' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryMemberSalesData,
  queryMemberSalesDataExcel,
  getMemberCount,
  queryMemberGrade,
  queryMemberShopping,
  queryMemberType,
  queryReceiptMap,
  queryMemberPay,
  queryDeliveryType,
  queryMemberTrend,
  queryConsumptionTrend,
} from '@/api/dataReportManage';
import qs from 'qs';
import { formatDate } from '@/utils/format-data';
const echarts = require('echarts');
export default {
  data() {
    return {
      logininfo: '',
      orgSeq: '',
      orgType: '',
      loading: true,
      dataViewDate: '1',
      dataViewRange: '',
      totalData: {
        newNum: 0,
        strongBindMemberSum: 0,
        total: 0,
        weakMemberSum: 0,
        lostMemberSum: 0,
      },
      value2: formatDate(new Date(), 'yyyy-MM'),
      value3: formatDate(new Date(), 'yyyy-MM'),
      formInline: {
        sortList: [],
        orderNo: '',
        orderStatus: '',
        companyName: '',
        returnStatus: '',
        customizeStatus: '',
        dateRange: '',
        payDateRange: '',
        fhDateRange: '',
        shopId: '',
        storeName: '',
        shopOwnerName: '',
        warzoneId: '',
        warzoneName: '',
        baseId: '',
        baseName: '',
        gradelevelId: '',
        memberName: '',
        memberPhone: '',
        goodsName: '',
        payMethod: '',
        deliveryMethod: '',
        authCode: '',
        isBuyLimit: '',
        isGiftOrder: '',
        isFeastOrder: '',
        goodsStyle: '',
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      tableGradeData: [
        {
          name: '普通会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '白银会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '黄金会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '钻石会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '至尊会员',
          value: '0',
          rate: '0%',
        },
      ],
      projectOption: {}, //饼状图数据
      shoppingprojectOption: {},
      tableShopData: [
        {
          name: '普通会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '白银会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '黄金会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '钻石会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '至尊会员',
          value: '0',
          rate: '0%',
        },
      ],
      memberPayOption: {},
      tableMemberPayData: [
        {
          name: '普通会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '白银会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '黄金会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '钻石会员',
          value: '0',
          rate: '0%',
        },
        {
          name: '至尊会员',
          value: '0',
          rate: '0%',
        },
      ],
      deliveryTypeOption: {},
      tableDeliveryTypeData: [
        {
          //1-到店自提 2-业务员配送 3-物流配送
          name: '业务员配送',
          value: '0',
          rate: '0%',
        },
        {
          name: '到店自提',
          value: '0',
          rate: '0%',
        },
        {
          name: '物流配送',
          value: '0',
          rate: '0%',
        },
      ],
      typeprojectOption: {},
      tableTypeData: [
        {
          //1、 自主注册2、产品分享注册3、 活动分享注册4、店铺分享注册5、分享有礼注册
          name: '自主注册',
          value: '0',
          rate: '0%',
        },
        {
          name: '产品分享注册',
          value: '0',
          rate: '0%',
        },
        {
          name: '活动分享注册',
          value: '0',
          rate: '0%',
        },
        {
          name: '店铺分享注册',
          value: '0',
          rate: '0%',
        },
        {
          name: '分享有礼注册',
          value: '0',
          rate: '0%',
        },
      ],
      projectOption: {}, //饼状图数据
      shoppingprojectOption: {},
      mapName: 'china',
      geoCoordMap: {},
      mapData: [
        {
          name: '北京',
          value: 0,
        },
        {
          name: '天津',
          value: 0,
        },
        {
          name: '河北',
          value: 0,
        },
        {
          name: '山西',
          value: 0,
        },
        {
          name: '内蒙古',
          value: 0,
        },
        {
          name: '辽宁',
          value: 0,
        },
        {
          name: '吉林',
          value: 0,
        },
        {
          name: '黑龙江',
          value: 0,
        },
        {
          name: '上海',
          value: 0,
        },
        {
          name: '江苏',
          value: 0,
        },
        {
          name: '浙江',
          value: 0,
        },
        {
          name: '安徽',
          value: 0,
        },
        {
          name: '福建',
          value: 0,
        },
        {
          name: '江西',
          value: 0,
        },
        {
          name: '山东',
          value: 0,
        },
        {
          name: '河南',
          value: 0,
        },
        {
          name: '湖北',
          value: 0,
        },
        {
          name: '湖南',
          value: 0,
        },
        {
          name: '重庆',
          value: 0,
        },
        {
          name: '四川',
          value: 0,
        },
        {
          name: '贵州',
          value: 0,
        },
        {
          name: '云南',
          value: 0,
        },
        {
          name: '西藏',
          value: 0,
        },
        {
          name: '陕西',
          value: 0,
        },
        {
          name: '甘肃',
          value: 0,
        },
        {
          name: '青海',
          value: 0,
        },
        {
          name: '宁夏',
          value: 0,
        },
        {
          name: '新疆',
          value: 0,
        },
        {
          name: '广东',
          value: 0,
        },
        {
          name: '广西',
          value: 0,
        },
        {
          name: '海南',
          value: 0,
        },
        {
          name: '台湾',
          value: 0,
        },
        {
          name: '南海诸岛',
          value: 0,
        },
      ],

      lineChart: '', //折线图
      optionfooter: {}, //折线图数据
    };
  },
  components: {},
  created() {
    this.logininfo = localStorage.getItem('logininfo');
    let orgJson = JSON.parse(this.logininfo);
    if (
      orgJson != null &&
      orgJson.orgList != null &&
      orgJson.orgList.length > 0
    ) {
      this.orgSeq = orgJson.orgList[0].orgSeq;
      this.orgType = orgJson.orgList[0].orgType;
    }
    if (this.orgType == 2) {
      //大区
      this.formInline.warzoneId = this.orgSeq;
    } else if (this.orgType == 3) {
      //营销区域
      this.formInline.baseId = this.orgSeq;
    } else if (this.orgType == 4) {
      //门店
      this.formInline.shopId = this.orgSeq;
    }

    // 并发请求
    this.axios
      .all([
        this.queryMemberGrade(),
        this.queryMemberShopping(),
        this.queryMemberType(),
        this.queryMemberPay(),
        this.queryDeliveryType(),
        this.queryReceiptMap(),
        this.getMemberCount(),
      ])
      .then(this.axios.spread(function(acct, perms) {}));
  },
  mounted() {
    this.getGeoCoordMap();

    this.getEcharts();
    this.showEcharts();

    this.initCharts();
  },
  filters: {
    numFilter(value) {
      let realVal = '';
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后2位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = '--';
      }
      return realVal;
    },
  },
  methods: {
    //点击空白日期初始化
    focusPickerDate() {
      this.dataViewRange = '';
    },
    //点击头部时间选择切换为日期状态
    changeDataViewDate() {
      this.dataViewDate = '4';
      this.getMemberCount();
    },
    /*头部看板*/
    getMemberCount() {
      let beginDate = '';
      let endDate = '';
      if (
        this.dataViewDate == '4' &&
        this.dataViewRange != null &&
        this.dataViewRange.length == 2
      ) {
        beginDate = this.dataViewRange[0];
        endDate = this.dataViewRange[1];
      } else {
        this.dataViewRange = '';
      }
      let data = {
        orgSeq: this.orgSeq,
        dataViewDate: this.dataViewDate,
        beginDate: beginDate,
        endDate: endDate,
        isReturn: 0, //退款订单为1，正常订单为0
        isCustomizeOrder: 0, //定制订单为1，普通订单为0
        shopId: this.formInline.shopId.trim(),
        warzoneId: this.formInline.warzoneId.trim(),
        baseId: this.formInline.baseId.trim(),
      };
      getMemberCount(data).then((res) => {
        if (res != null) {
          this.totalData.newNum = res.result.newNum;
          this.totalData.strongBindMemberSum = res.result.strongBindMemberSum;
          this.totalData.total = res.result.total;
          this.totalData.weakMemberSum = res.result.weakMemberSum;
          this.totalData.lostMemberSum = res.result.lostMemberSum;
        }
      });
    },
    //清空
    kong() {
      this.formInline.sortList = [];
      this.formInline.orderNo = '';
      this.formInline.orderStatus = '';
      this.formInline.companyName = '';
      this.formInline.returnStatus = '';
      this.formInline.customizeStatus = '';
      this.formInline.dateRange = '';
      this.formInline.payDateRange = '';
      this.formInline.fhDateRange = '';
      this.formInline.storeName = '';
      this.formInline.shopOwnerName = '';
      this.formInline.warzoneName = '';
      this.formInline.baseName = '';
      this.formInline.gradelevelId = '';
      this.formInline.memberName = '';
      this.formInline.memberPhone = '';
      this.formInline.goodsName = '';
      this.formInline.payMethod = '';
      this.formInline.deliveryMethod = '';
      this.formInline.authCode = '';
      this.formInline.isBuyLimit = '';
      this.formInline.isGiftOrder = '';
      this.formInline.isFeastOrder = '';
      this.formInline.goodsStyle = '';
    },

    getGeoCoordMap() {
      var that = this;
      var mapFeatures = echarts.getMap(this.mapName).geoJson.features;
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        that.geoCoordMap[name] = v.properties.cp;
      });
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },
    //数字格式化
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        if (cellValue < 0) {
          return '0.00';
        } else {
          return cellValue.toFixed(2);
        }
      } else {
        return cellValue;
      }
    },

    queryMemberGrade() {
      let data = { orgSeq: this.orgSeq };
      queryMemberGrade(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.tableGradeData.find((itemGrade, i) => {
                if (itemGrade.name === item.gradeLevel) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                }
                return itemGrade.name === item.gradeLevel;
              });
            });
          }
          this.initMyCharts();
        })
        .catch(() => {});
    },
    queryMemberShopping() {
      let data = { orgSeq: this.orgSeq };
      queryMemberShopping(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.tableShopData.find((itemGrade, i) => {
                if (itemGrade.name === item.gradeLevel) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                }
                return itemGrade.name === item.gradeLevel;
              });
            });
          }
          this.initMyShopCharts();
        })
        .catch(() => {});
    },
    queryMemberType() {
      let data = { orgSeq: this.orgSeq };
      queryMemberType(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.tableTypeData.find((itemGrade, i) => {
                if (item.memberType === 1 && itemGrade.name === '自主注册') {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.memberType === 2 &&
                  itemGrade.name === '产品分享注册'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.memberType === 3 &&
                  itemGrade.name === '活动分享注册'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.memberType === 4 &&
                  itemGrade.name === '店铺分享注册'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.memberType === 5 &&
                  itemGrade.name === '分享有礼注册'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                }
              });
            });
          }
          this.initMyTypeCharts();
        })
        .catch(() => {});
    },
    queryMemberPay() {
      let data = { orgSeq: this.orgSeq };
      queryMemberPay(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.tableMemberPayData.find((itemGrade, i) => {
                if (itemGrade.name === item.gradeLevel) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                }
                return itemGrade.name === item.gradeLevel;
              });
            });
          }
          this.initMyMemberCharts();
        })
        .catch(() => {});
    },
    queryDeliveryType() {
      let data = { orgSeq: this.orgSeq };
      queryDeliveryType(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.tableDeliveryTypeData.find((itemGrade, i) => {
                if (item.deliveryType === 1 && itemGrade.name === '到店自提') {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.deliveryType === 2 &&
                  itemGrade.name === '业务员配送'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                } else if (
                  item.deliveryType === 3 &&
                  itemGrade.name === '物流配送'
                ) {
                  itemGrade.value = item.num;
                  itemGrade.rate = item.rate;
                  return true;
                }
              });
            });
          }
          this.initMyDeliveryCharts();
        })
        .catch(() => {});
    },
    queryReceiptMap() {
      let data = { orgSeq: this.orgSeq, city: '' };
      queryReceiptMap(data)
        .then((res) => {
          if (res != null) {
            res.records.forEach((item, i) => {
              this.mapData.find((itemMap, i) => {
                if (itemMap.name === item.city) {
                  itemMap.value = item.orderSum;
                  return true;
                }
                if (itemMap.name === '内蒙古' && item.city === '内蒙') {
                  itemMap.value = item.orderSum;
                  return true;
                }
              });
            });
          }
          this.initMyChartChina();
        })
        .catch(() => {});
    },
    initMyCharts() {
      var myChart = echarts.init(this.$refs.grade, 'shine');
      myChart.setOption({}, true);
      this.projectOption = {
        // title: {text: '会员等级人数占比',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.tableGradeData.map((item, index) => {
            return Object.assign({}, { name: item.name });
          }),
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableGradeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      // 渲染绘制图表
      myChart.setOption(this.projectOption);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    },
    initMyShopCharts() {
      let myShopping = echarts.init(this.$refs.shopping, 'shine');
      this.shoppingprojectOption = {
        // title: {text: '会员下单数量占比',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.tableShopData.map((item, index) => {
            return Object.assign({}, { name: item.name });
          }),
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableShopData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      // 渲染绘制图表
      myShopping.setOption(this.shoppingprojectOption);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        myShopping.resize();
      });
    },
    initMyMemberCharts() {
      let MyMemberChart = echarts.init(this.$refs.memberPay, 'shine');
      this.memberPayOption = {
        // title: {text: '会员成交金额占比',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.tableMemberPayData.map((item, index) => {
            return Object.assign({}, { name: item.name });
          }),
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableMemberPayData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      // 渲染绘制图表
      MyMemberChart.setOption(this.memberPayOption);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        MyMemberChart.resize();
      });
    },
    initMyTypeCharts() {
      let myTypeChart = echarts.init(this.$refs.typeChart, 'shine');
      this.typeprojectOption = {
        // title: {text: '会员注册渠道占比',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.tableTypeData.map((item, index) => {
            return Object.assign({}, { name: item.name });
          }),
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableTypeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      // 渲染绘制图表
      myTypeChart.setOption(this.typeprojectOption);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        myTypeChart.resize();
      });
    },
    initMyDeliveryCharts() {
      let myDeliveryChart = echarts.init(this.$refs.deliveryType, 'shine');
      this.deliveryTypeOption = {
        // title: {text: '订单配送方式占比',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.tableDeliveryTypeData.map((item, index) => {
            return Object.assign({}, { name: item.name });
          }),
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableDeliveryTypeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      // 渲染绘制图表
      myDeliveryChart.setOption(this.deliveryTypeOption);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        myDeliveryChart.resize();
      });
    },
    initMyChartChina() {
      let myChartChina = echarts.init(this.$refs.myChartChina, 'shine');
      // 绘制图表
      var that = this;
      var optionMap = {
        // title: {
        //   text: "会员收货地址分布图",
        //   subtext: "",
        //   x: 'left',
        //   textStyle: {
        //     color: 'rgb(55, 75, 113)',
        //     fontFamily: '等线',
        //     fontSize: 18
        //   },
        //   subtextStyle: {
        //     fontSize: 15,
        //     fontFamily: '等线'
        //   }
        // },
        tooltip: {},
        visualMap: {
          show: true,
          min: 0,
          max: 100000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ['#e0ffff', '#25677F'],
          },
        },
        geo: {
          show: true,
          map: 'china',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7',
            },
          },
        },
        series:
          // [
          //   {
          //   name: '普通',
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   data: that.convertData(that.mapData),
          //   // symbolSize: function(val) {
          //   //   return val[2] / 10000
          //   // },
          //   label: {
          //     normal: {
          //     formatter: '{b}',
          //     position: 'right',
          //     show: true
          //   },
          //   emphasis: {
          //     show: true
          //   }
          //   },
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#00ff00'
          //   //   }
          //   // }
          // },
          {
            name: '订单数量',
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              color: function(params) {
                //seriesIndex, dataIndex, data, value
                if (params.value < 1000) {
                  return '#65CAD4';
                } else if (params.value > 1000 && params.value <= 20000) {
                  return '#28BFC8';
                } else if (params.value > 20000 && params.value <= 60000) {
                  return '#24B4B5';
                } else if (params.value > 60000 && params.value <= 90000) {
                  return '#2E999F';
                } else if (params.value > 90000) {
                  return '#25677F';
                }
              },
            },
            animation: true,
            data: that.mapData,
          },
        // ]
      };

      myChartChina.setOption(optionMap);
      //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener('resize', function() {
        myChartChina.resize();
      });
      //     window.onresize = function () {
      //   myChartChina.resize()
      // }
    },
    //初始化数据
    initCharts() {
      this.initMyCharts();
      this.initMyShopCharts();
      this.initMyMemberCharts();
      this.initMyTypeCharts();
      this.initMyDeliveryCharts();
      this.initMyChartChina();
    },

    getEcharts() {
      //折线图的渲染
      const params = {
        orgSeq: this.orgSeq,
        month: this.value2,
      };
      queryMemberTrend(params)
        .then((res) => {
          if (res != null) {
            let data = res.records;
            let lineChart = echarts.init(
              document.getElementById('memberTrend')
            );
            //折线图
            this.optionfooter = {
              color: 'red',
              // title: {text: '会员新增趋势',subtext: '',left: 'left',textStyle: {"fontSize": 16,"fontWeight": 'normal'/*"bolder"*/,"color": "#2B7DBC"},},
              tooltip: {
                trigger: 'axis', //鼠标移动上面的时候可以显示数据
              },
              legend: {
                data: ['新增'],
                top: 0,
              },
              grid: {
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true,
              },
              // toolbox: {
              //   feature: {
              //     saveAsImage: {}
              //   }
              // },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                name: '日期',
                data: data.map((item) => item.month),
              },
              yAxis: {
                name: '数量',
                type: 'value',
              },
              series: [
                {
                  name: '新增',
                  type: 'line',
                  //stack: '总量',
                  data: data.map((item) => item.num),
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        color: '#1890ff', //设置折线线条颜色
                      },
                    },
                  },
                },
              ],
            };
            //数据渲染到图表上面
            lineChart.setOption(this.optionfooter);
            //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
            window.addEventListener('resize', function() {
              lineChart.resize();
            });
          }
        })
        .catch(() => {});
    },

    showEcharts() {
      //折线图的渲染
      const params = {
        orgSeq: this.orgSeq,
        month: this.value3,
      };
      queryConsumptionTrend(params)
        .then((res) => {
          if (res != null) {
            let data = res.records;
            // 基于准备好的dom，初始化echarts实例
            let myConsumptionTrendChart = echarts.init(
              this.$refs.consumptionTrend
            );
            // 绘制图表
            myConsumptionTrendChart.setOption({
              tooltip: {
                trigger: 'axis', //鼠标移动上面的时候可以显示数据
              },
              legend: {
                selectedMode: true, //可点击
                data: ['购买会员人数', '订单总数'],
                bottom: 0,
              },
              grid: {
                left: 100,
              },
              //  toolbox: {
              //   feature: {
              //         saveAsImage: {}
              //       }
              //   },
              xAxis: [
                {
                  type: 'category',
                  data: data.map((item, index) => {
                    return item.orderDate;
                  }),
                  splitLine: {
                    //不显示分割线
                    show: false,
                  },
                },
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '购买会员人数',
                  splitLine: {
                    //显示分割线
                    show: false,
                  },
                },
                {
                  type: 'value',
                  name: '订单总数',
                  //	                        axisLabel: {
                  //	                            formatter: '{value} °C'
                  //	                        },
                  splitLine: {
                    show: false,
                  },
                },
              ],
              series: [
                {
                  name: '购买会员人数',
                  type: 'bar',
                  data: data.map((item, index) => {
                    return item.memberNum;
                  }),
                  itemStyle: {
                    color: 'rgba(132, 136, 211, 1)',
                  },
                },
                {
                  name: '订单总数',
                  type: 'line',
                  yAxisIndex: 1, //索引从0开始
                  data: data.map((item, index) => {
                    return item.orderSum;
                  }),
                  itemStyle: {
                    color: 'rgba(91, 245, 204, 1)',
                  },
                },
              ],
            });
            //加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
            window.addEventListener('resize', function() {
              myConsumptionTrendChart.resize();
            });
          }
        })
        .catch(() => {});
    },
  },
  //其他
  computed: {},
};
</script>
<style scoped>
#orderSearchDiv
  /deep/
  .el-radio-button-inner-datepicker
  .el-radio-button__inner {
  padding: 0;
}
#orderSearchDiv /deep/ .el-radio-button-inner-datepicker .el-input__inner {
  border: none;
  height: 38px;
}
#orderSearchDiv /deep/ #orderSearchForm {
  margin-left: -30px;
  padding: 0;
  display: inline-block;
  text-align: left;
}
#orderSearchDiv /deep/ .el-form--inline .el-form-item__content {
  width: 180px;
}
#orderSearchDiv /deep/ .el-range-editor.el-input__inner {
  width: 250px;
}
#orderSearchDiv /deep/ .el-dialog__body {
  padding-top: 0;
}
#order_total_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
#order_total_flex /deep/ .order_content {
  cursor: pointer;
  width: 200px;
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_detail {
  width: 200px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#order_total_flex /deep/ .order_content2 {
  width: 60px;
  cursor: pointer;
  padding: 10px 0;
  margin: 0 1px;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_content .order_total_title {
  color: #000;
}
#order_total_flex /deep/ .order_content .order_total_info {
  margin-top: 10px;
}
#order_total_flex /deep/ .order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}
.all {
  overflow: auto;
  height: 100%;
  /* background-color: #fff; */
}
</style>
<style lang="scss" scoped>
.index-container {
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    .header-left,
    .header-right,
    .header-center {
      width: 33%;
      // float: left;
      height: 580px;
    }
    .header-right {
      background: #051235;
    }
  }
  .footer {
    margin-top: 124px;
    width: 100%;
    height: 37%;
    display: flex;
    justify-content: space-between;
    // overflow: hidden;
  }
}
</style>
